<template>
  <div class="app-container">
    <div id="" class="header">
      <div id="" class="title_search">
        <el-input
          class="search_input"
          v-model="req_xin_xi.keyword"
          placeholder="搜索关键字"
          clearable
        ></el-input>
      </div>
      <div class="block">
        <el-date-picker
          prefix-icon="none"
          style="width: 240px"
          v-model="time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </div>

      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
      <el-button type="primary" icon="el-icon-search" @click="refresh"
        >刷新</el-button
      >
    </div>

    <el-table
      v-loading="table_loading"
      :data="rolesList"
      style="width: 100%; margin-top: 30px"
      border
    >
      <el-table-column
        align="center"
        label="结算单编号"
        width="220"
      >
      <template scope="scope">
        <span class="link-type" @click="list_detail(scope)">
          {{scope.row.statement_num}}
        </span>
      </template>
      </el-table-column>

      <el-table-column align="center" label="价格" width="100" prop="price">
      </el-table-column>

      <el-table-column align="center" label="申请人" prop="uid_str">
      </el-table-column>

      <el-table-column align="center" label="时间" prop="bian_hao" width="150">
      </el-table-column>

      <el-table-column align="center" label="备注" prop="remark">
      </el-table-column>
    </el-table>
    <!-- 翻页组件 -->
    <div id="" class="pages">
      <el-pagination
        @size-change="size_change"
        background
        @current-change="current_change"
        :current-page="req_xin_xi.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
    <!-- 翻页组件 -->

    <el-dialog :visible.sync="dialogVisible" title="开票" center>
      <el-form ref="role" :rules="rules" :model="role" label-width="100px">
        <el-form-item label="公司名称" prop="company_name">
          <el-input v-model="role.company_name" placeholder="" />
        </el-form-item>
        <el-form-item label="发票金额" prop="price">
          <el-input
            type="number"
            v-model="role.price"
            placeholder=""
            @input="price_input"
          />
          <span v-show="tishi_title" style="color: red"
            >金额大于开票金额了</span
          >
        </el-form-item>
        <el-form-item label="发票编号" prop="invoice_num">
          <el-input v-model="role.invoice_num" placeholder="" />
        </el-form-item>
        <!-- <el-form-item
          label="结算单id"
          v-show="dialogType === 'new' ? false : true"
        >
          <el-input v-model="role.statement_id" placeholder="" />
        </el-form-item> -->
        <el-form-item label="开票时间" prop="invoice_time">
          <el-date-picker
            v-model="role.invoice_time"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            type="datetime"
            placeholder="选择日期时间"
            @focus="time_focus"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input class="na_shui" v-model="role.company_num" placeholder="" />
        </el-form-item>
        <el-form-item label="公司电话">
          <el-input type="number" v-model="role.company_tel" placeholder="" />
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input v-model="role.company_addr" placeholder="" />
        </el-form-item>
        <el-form-item label="发票类型">
          <el-input v-model="role.invoice_type" placeholder="" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="role.remark"
            placeholder=""
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-form>

      <div style="text-align: center">
        <el-button type="danger" @click="quxiao">取消</el-button>
        <el-tooltip
          class="item"
          effect="dark"
          content="请仔细检查输入内容,提交后无法修改"
          placement="left-end"
        >
          <el-button type="primary" @click="confirmRole">提交</el-button>
        </el-tooltip>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  dai_yi_list,
  del_dai_kai_piao,
  fa_piao_add,
} from "@/api/kai_piao/fa_piao_list.js";

export default {
  name: "kaipiao_has",
  data() {
    return {
      tishi_title: false,
      price: "",
      table_loading: false,
      button_loading: false,
      count: 0,
      time: "",
      role: {
        company_name: "",
        price: "",
        invoice_num: "",
        statement_id: "",
        invoice_time: "",
        company_num: "",
        company_tel: "",
        company_addr: "",
        invoice_type: "增值税专用发票",
        remark: "",
      },
      routes: [],
      rolesList: [],
      dialogVisible: false,
      dialogType: "new",
      remove_id: "",
      req_xin_xi: {
        has_invoice: 1,
        keyword: "",
        page: 1,
        limit: 10,
        search_time: "",
      },
      rules: {
        company_name: [
          { required: true, message: "输入公司名称", trigger: "blur" },
        ],
        price: [{ required: true, message: "输入发票金额", trigger: "blur" }],
        invoice_num: [
          { required: true, message: "输入发票编号", trigger: "blur" },
        ],
        invoice_time: [
          { required: true, message: "输入开票时间", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.get_list();
  },
  methods: {
    //跳转结算单
    list_detail(val){
      this.$router.push({
        path:"jiesuan_detail",
        query:{
          statement_id:val.row.id
        }
      })
    },
    // 获取列表
    get_list() {
      console.log(this.time)
      this.table_loading = true;
      this.req_xin_xi.search_time = this.time ? this.time : ''
      dai_yi_list(this.req_xin_xi).then((res) => {
        this.table_loading = false;
        this.rolesList = res.data;
        this.count = res.count;
      });
    },
    confirmRole() {
      this.$refs.role.validate((valid) => {
        if (valid) {
          fa_piao_add(this.role).then((res) => {
            this.$refs.role.resetFields();
            this.role = {
              company_name: "",
              price: "",
              invoice_num: "",
              statement_id: "",
              invoice_time: "",
              company_num: "",
              company_tel: "",
              company_addr: "",
              invoice_type: "增值税专用发票",
              remark: "",
            };
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.get_list();
          });
        } else {
        }
      });
    },
    handleEdit(scope) {
      this.role.statement_id = scope.row.id;
      this.price = scope.row.price;
      this.dialogVisible = true;
    },
    size_change(e) {
      this.req_xin_xi.limit = e;
      this.get_list();
    },
    // 删除
    del(id) {
      this.remove_id = id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del_dai_kai_piao({ id: this.remove_id }).then((res) => {
            this.get_list();
            this.$message({
              type: "success",
              message: res.msg,
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },
    // 刷新
    refresh() {
      this.req_xin_xi = {
        has_invoice: 1,
        keyword: "",
        page: 1,
        limit: 10,
        search_time: "",
      };
      this.get_list();
    },
    time_focus() {},
    // 搜索
    search() {
      this.get_list();
    },
    // 翻页
    current_change(e) {
      this.req_xin_xi.page = e;
      this.get_list();
    },
    price_input(e) {
      if (Number(e) > Number(this.price)) {
        this.tishi_title = true;
      } else {
        this.tishi_title = false;
      }
    },
    quxiao() {
      this.$refs.role.resetFields();
      this.dialogVisible = false;
      this.role = {
        company_name: "",
        price: "",
        invoice_num: "",
        statement_id: "",
        invoice_time: "",
        company_num: "",
        company_tel: "",
        company_addr: "",
        invoice_type: "增值税专用发票",
        remark: "",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }
}

.del {
  margin: 0;
}

.header {
  display: flex;
  justify-content: flex-start;
}

.search_input {
  width: 202px;
}

// 翻页组件居中
.pages {
  display: flex;
  padding-top: 20px;
}
</style>
